<template>
  <div class="nav-wrapper">
    <img v-if="!isPhone" @click="indexCli(0,'/')" src="../assets/logo.svg" alt="">
    <div class="menu" v-if="!isPhone">
      <template>
        <div class="item" @click="indexCli(0,'/')">
          <p :class="sleIndex == 0?'colorh':'colorfff'">{{$t('user.Home')}}</p>
        </div>
        <div class="item" @click="indexCli(1,'/metaboard/login')">
          <p :class="sleIndex == 1?'colorh':'colorfff'">MetaBoard</p>
        </div>
        <div class="item" @click="indexCli(2,'/metaPool')">
          <p :class="sleIndex == 2?'colorh':'colorfff'">MetaPool</p>
        </div>
        <!-- <div class="item" @click="indexCli(3,'/metaboardQa')">
          <p :class="sleIndex == 3?'colorh':'colorfff'">FAQ</p>
        </div> -->
        <div class="item" @click="indexCli(4,'/metaboardRule')">
          <p :class="sleIndex == 4?'colorh':'colorfff'">{{$t('user.M_home_rules')}}</p>
        </div>
      </template>
      <div class="item">
        <a-dropdown v-model="lanChecked" :trigger="['click']" :overlayStyle="{position: 'fixed'}">
              <div class="language">
                <div><img :src="langList[activeLang].src" alt="">
                {{langList[activeLang].name}}</div>
                <div :class="['arrow',lanChecked && 'active']"></div>
              </div>
              <a-menu slot="overlay">
                <a-menu-item  v-for="(val,index) in langList" :key="val.lang" @click="langCli(val.lang,index)">
                  <div  class="language-menu-item" >
                    <img :src="val.src" alt="">
                    <span>{{val.name}}</span>
                  </div>
                </a-menu-item>
              </a-menu>
        </a-dropdown>
      </div>
      <div v-if='!showConnect' class="top-link" @click="connectWalletCli">
        <img src="../assets/icon-wallet-black.svg" alt="">
        <span>{{$t('user.ConnectWallet')}}</span>
      </div>
      <div v-else class="top-link">
        {{userAddress}}
      </div>
    </div>
    <div class="home" v-else>
      <div class="home-nav" v-if="showNav">
        <img @click="showNav = false" src="../assets/mobile-icon-closeWhite@2x.png" alt="">
        <div class="home-nav-title">
          <div @click="indexCli(0,'/')">
            <span :class="sleIndex == 0?'colorh':'colorfff'">{{$t('user.Home')}}</span>
          </div>
          <div @click="indexCli(1,'/metaboard/login')">
            <span :class="sleIndex == 1?'colorh':'colorfff'">MetaBoard</span>
          </div>
          <div @click="indexCli(2,'/metaPool')">
            <span :class="sleIndex == 2?'colorh':'colorfff'">MetaPool</span>
          </div>
          <!-- <div @click="indexCli(3,'/metaboardQa')">
            <span :class="sleIndex == 3?'colorh':'colorfff'">FAQ</span>
          </div> -->
          <div @click="indexCli(4,'/metaboardRule')">
            <span :class="sleIndex == 4?'colorh':'colorfff'">{{$t('user.M_home_rules')}}</span>
          </div>
        </div>
      </div>
      <div class="home-top">
        <div>
          <img class="open-left" @click="openLeftCli" v-if="utils.isMobile() && showicon" src="../assets/openleft.jpg" alt="">
          <img :class="utils.isMobile() && showicon?'logo-left':''" @click="$router.push('/')" src="../assets/logo.svg" alt="">
        </div>
        <div>
          <div class="item">
            <a-dropdown v-model="lanChecked" :trigger="['click']" :overlayStyle="{position: 'fixed'}">
                  <div class="language">
                    <div><img :src="langList[activeLang].src" alt="">
                    <span style="position: relative;top: -8px;">{{langList[activeLang].name}}</span></div>
                    <div :class="['arrow',lanChecked && 'active']"></div>
                  </div>
                  <a-menu slot="overlay">
                    <a-menu-item  v-for="(val,index) in langList" :key="val.lang" @click="langCli(val.lang,index)">
                      <div  class="language-menu-item" >
                        <img :src="val.src" alt="">
                        <span>{{val.name}}</span>
                      </div>
                    </a-menu-item>
                  </a-menu>
            </a-dropdown>
            <a-icon style="position: absolute;right: 15px;top: 22px;" @click="showNav = true" type="menu" />
          </div>
        </div>
      </div>
      <div class="metaPool-link" v-if="!showConnect" @click="connectWalletCli">
        <img src="../assets/icon-wallet-black.svg" alt="">
        <span>{{$t('user.ConnectWallet')}}</span>
      </div>
      <div class="metaPool-link" v-else>
        {{userAddress}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'newNav',
  data () {
    return {
        windowWidth: '-1',
       //语言
        langList:[
          {lang:'en',name:'EN',src:require('../assets/lang-en.png')},
          {lang:'ko',name:'KO',src:require('../assets/ko.png')},
          {lang:'jp',name:'JA',src:require('../assets/jp.png')},
          {lang:'zh',name:'CN',src:require('../assets/lang-cn.png')},
          {lang:'es',name:'ES',src:require('../assets/es.png')},
        ],
        //选中的语言
        activeLang: 0,
        lanChecked: false,
        menuVisible: false,
        showNav:false,
        showicon:false,
        sleIndex:0,
        showConnect:false,
        userAddress:'',
    }
  },  
  props:['selNum'],
  computed:{
    isPhone(){
      if(this.windowWidth == -1) return false
      return this.windowWidth <= 649
    }
  },
  created() {
    // this.connectWalletCli();
    this.langList.filter((v,i) => {
      if(localStorage.getItem('languageSet') === v.lang)
      this.activeLang = i
    })
    this.windowWidth = window.innerWidth//浏览器窗口的内部宽度（包括滚动条）
      || document.documentElement.clientWidth
      || document.body.clientWidth;
    window.addEventListener('resize', this.handleResize);
    if(window.location.href.indexOf('metaboard') != -1 && window.location.href.indexOf('metaboardRule') == -1){
      this.showicon = true;
    }
    this.sleIndex = this.selNum;
  },
  beforeDestroy(){
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    //钱包地址处理
    walltUpadte(name){
      return [...name].map((item, index, arr)=>{
        if(index>=6 && index<=34){
          return ''
        }
        if(index==35){
          return '...'
        }
        if(index<6 || index>35){
          return item
        }
      }).join('')
      console.log()
    },
    //连接钱包
    connectWalletCli(){
      var that = this;
      //检测当前浏览器是否以太坊兼容，并进行相应的处理
      if (typeof window.ethereum === 'undefined') {
        this.$message.info('浏览器不兼容')
      } else {
        //如果用户安装了MetaMask，你可以要求他们授权应用登录并获取其账号
        ethereum.enable()
        //如果用户拒绝了登录请求
        .catch(function (reason) {
            if (reason === 'User rejected provider access') {
                // 用户不想登录，你看该怎么办？
                that.$message.info('There was an issue signing you in.')
                return
            } else {
                // 本不该执行到这里，但是真到这里了，说明发生了意外
                that.$message.info('There was an issue signing you in.')
                return
            }
        })
        //如果用户同意了登录请求，你就可以拿到用户的账号
        .then(function (accounts) {
          if(accounts){
            that.showConnect = true;
              // You also should verify the user is on the correct network:
              //你也可以验证用户接入了正确的网络
              // if (ethereum.networkVersion !== desiredNetwork) {
              // alert('This application requires the main network, please switch it in your MetaMask UI.')

              // //我们计划在最近补充一个有关网络切换的API，参考下面链接
              // // https://github.com/MetaMask/metamask-extension/issues/3663
              // }

              //一旦获取了用户账号，你就可以签名交易
              that.userAddress = that.walltUpadte(accounts[0]);
          }
        })
      } 
    },
    openLeftCli(){
      this.$emit('openleft',true)
    },
    indexCli(num,str){
      this.sleIndex = num;
      this.jumpTargetPage(str);
      this.showNav = false;
    },
    jumpTargetPage(path){
      this.$router.push(path)
    },
    //信息下拉选项
    updateVsibleState() {
      this.menuVisible = !this.menuVisible
    },
    handleResize(e){
      this.windowWidth = window.innerWidth//浏览器窗口的内部宽度（包括滚动条）
      || document.documentElement.clientWidth
      || document.body.clientWidth;
    },
    //语言切换
    langCli(language,index) {
      this.utils.langCli.call(this,language,() => {
        this.activeLang = index;
      })
      this.lanChecked = false

    },
  }
}
</script>

<style scoped lang="scss">
  .colorh{
    color: #EEB32F!important;
  }
  .colorfff{
    color: #fff!important;
  }
  .home{
    .home-nav{
      width: 100%;
      height: 100vh;
      position: fixed;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.9);
      img{
        width: 26px;
        position: absolute;
        right: 20px;
        top: 24px;
      }
      .home-nav-title{
        text-align: center;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        padding-top: 120px;
        >div{
          margin-bottom: 52px;
          position: relative;              
          .line{
            width: 63px;
            margin: 0 auto;
            height: 3px;
            background-color: #FEDD4F;
          }
        }
      }
    }
    .home-top{
      width: 100%;
      height: 62px;
      background-color: #1E1E1E;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 10;
      padding: 18px 15px;
      line-height: 43px;
      display: flex;
      justify-content: space-between;
      .img1{
        width: 43px;
        margin-right: 9px;
      }
    }
  }
  .top-link{
      height: 32px;
      padding: 7px 24px;
      background-color: #EFB133;
      font-size: 16px;
      border-radius: 5px;
      margin-left: 60px;
      color: #000;
      cursor: pointer;
      span{
        position: relative;
        top: -3px;
      }
      img{
        width: 20px;
        position: relative;
        top: -1px;
        margin-right: 6px;
      }
    }
  .nav-dra /deep/ .ant-drawer-content{
    background-color: rgba(0,0,0,.7);
    color: #fff;
  }
  .nav-dra /deep/ .ant-drawer-body{
    >.close-btn{
      position: absolute;
      top: 24px;
      right: 20px;
      width: 40px;
    }
    >.logo-img{
      position: absolute;
      bottom: 70px;
      left: calc(50% - 75px);
      width: 150px;
    }
    >.menu-wrapper{
      width: 100%;
      height: 100%;
      color: #fff;
      position: fixed;
      top: calc(50% - 200px);
    }
  }
  .menu-wrapper {
    position: relative;
    color: #000;
    >.m-content {
      padding: 40px 80px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      >.close-btn {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 36px;
        height: 36px;
      } 
      >.menu-item {
        position: relative;
        padding: 16px 0;
        text-align: center;
        font-size: 18px;
        font-weight:500;
        >.label{
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 30px;
            height: 20px;
            flex-shrink: 0;
            margin-right: 12px;
          }
        }
      }
    }
  }
  .nav-wrapper {
    width: 100%;
    background: #1E1E1E;
    color: #fff;
    position: fixed;
    display: flex;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    >.menu {
      display: flex;
      align-items: center;
    }
    >img{
      cursor: pointer;
    }
    
  }
  .metaPool-link{
    width: 112px;
    height: 36px;
    line-height: 36px;
    position: fixed;
    bottom: 110px;
    left: 0px;
    background-color: #EEB32F;
    border-radius: 0px 6px 6px 0px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    img{
      width: 20px;
      position: relative;
      top: 7px;
      margin-right:6px;
    }
  }
@media only screen and (min-width: 320px) and (max-width: 639px){
  .open-left{
    width: 62px;
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .logo-left{
    margin-left: 56px;
  }
      .item {
        // 移动端导航栏宽度
        width: 120px;
        >.line {
          margin-left: 20px;
          width: 22px;
          height: 2px;
          background: #fff;
          margin-bottom: 6px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        .language {
            display: flex;
            align-items: center;
            font-size: 14px;
            img {
              width: 22px;
              height: 22px;
              margin-right: 8px;
              position: relative;
              top: 2px;
            }
            .arrow {
              width: 8px;
              height: 8px;
              border-top: 1px solid #fff;
              border-right: 1px solid #fff; 
              transform: rotate(135deg);
              transition: all .3s ease;
              margin-left: 10px;
              position: relative;
              top: -8px;
              &.active {
                transform: rotate(-45deg);
              }
            }
          }
      }
  .language-menu-item {
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
    }
    span {
      padding-left: 12px;
      font-size: 16px;
    }
  }
}

@media only screen and (min-width: 640px) {
  .language-menu-item {
    height: 40px;
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      margin-right: 3px;
    }
    span {
      font-size: 16px;
    }
  }
    .nav-wrapper {
      padding: 30px 12% 0;
      flex-wrap: wrap;
     
      >img {
        width: 147px;
        flex-shrink: 0;
        margin-right: 10%;
        margin-bottom: 20px;

      }
      >.menu {
        overflow: auto;
        padding-bottom: 20px;

        >.item {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          margin-left: 40px;
          cursor: pointer;

          &:first-child {
            margin-left: 0;
          }
          >.language {
            height: 34px;
            padding: 2px 20px 2px 10px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            background: rgba($color: #fff, $alpha: .2);
            font-size: 14px;
            img {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              flex-shrink: 0;
              margin-right: 8px;
              position: relative;
              top: 1px;
            }
            .arrow {
              width: 8px;
              height: 8px;
              border-top: 2px solid #fff;
              border-right: 2px solid #fff; 
              transform: rotate(135deg);
              transition: all .3s ease;
              margin-left: 10px;
              &.active {
                transform: rotate(-45deg);
              }
            }
          }
          >p {
            font-size: 16px;
            color: #fff;
          }
          >.img {
            width: 30px;
            height: 30px;
          }
          >.btn {
            width: 123px;
            height: 43px;
            line-height: 43px;
            text-align: center;
            border: 2px solid #402C97;
            border-radius: 22px;
            font-size: 18px;
          }
        }
      }
    }
}

</style>
